<template>
    <transition-group name="el-zoom-in-bottom" class="tags-view">
        <router-link :to="{name:item.name}" :class="['tags',item.name===$route.name?'active':'']" v-for="(item,i) in historyList" :key="i+'123'" custom
            v-slot="{ navigate }">
            <div @click="navigate" @keypress.enter="navigate" role="link">
                <span>
                    {{item.meta.title}}
                </span>
                <i class="el-icon-close" v-if="item.name===$route.name&&historyList.length>1" @click.stop="del(i)"></i>
            </div>
        </router-link>
    </transition-group>
</template>

<script>
export default {
    data() {
        return {
            historyList: [],
        };
    },
    watch: {
        $route: {
            handler(a) {
                if (this.historyList.some((item) => item.name === a.name)) {
                } else {
                    this.historyList.push(a);
                }
            },
            immediate: true,
        },
    },
    methods: {
        del(i) {
            this.historyList.splice(i, 1);
            let name = "";
            if (this.historyList.length === i) {
                name = this.historyList[this.historyList.length - 1].name;
            } else {
                name = this.historyList[i].name;
            }
            this.$router.push({
                name,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.tags-view {
    height: 30px;
    display: flex;
    align-items: flex-start;
    .tags {
        flex-shrink: 0;
        margin-right: 8px;
        position: relative;
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        border: 1px solid #d8dce5;
        color: #495060;
        background: #fff;
        padding: 0 8px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        // transition: 2s;
        // transition-property: width;
    }
    .active {
        color: #fff;
        background-color: #322f2f;
        border-color: #322f2f;
        span {
            margin: 0 4px;
        }
        i {
            transform: scale(0.8);
            margin-top: 2px;
        }
    }
    .active::before {
        content: "";
        background: #fff;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        margin-right: 2px;
    }
}
</style>